<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo-支持搜索和筛选的用户列表</title>

    <style>
        .container {
            margin: 50px;
        }

        .content {
            margin: 20px;
        }
    </style>
</head>
<body>
<div id="application">
    <comp></comp>
</div>
<script src="../vue3.js"></script>
<script>
    let mock = [
        {name: "小王", sex: 0},
        {name: "小李", sex: 0},
        {name: "人均龙", sex: 1},
        {name: "缤购", sex: 1},
        {name: "小张", sex: 0},
        {name: "小红", sex: 1},
        {name: "小红", sex: 0},
    ]
    const app = Vue.createApp({});
    const comp = {
        data() {
            return {
                sexFilter: -1,
                showData: [],
                searchKey: ""
            }
        },
        methods: {
            queryAllData() {
                this.showData = mock
            }
        },
        watch: {
            sexFilter(newValue, oldValue) {
                let data = mock
                if (this.searchKey.length !== 0) {
                    data = data.filter((item) => {return item.name.search(this.searchKey) !== -1})
                }
                if (newValue === -1) {
                    this.showData = data
                } else {
                    this.showData = data.filter((item) => {
                        return item.sex === newValue
                    })
                }
            },
            searchKey(newValue, oldValue) {
                let data = mock
                if (this.sexFilter !== -1) {
                    data = data.filter((item) => {return item.sex === this.sexFilter})
                }
                if (newValue.length === 0) {
                    this.showData = data
                } else {
                    this.showData = data.filter((item) => {
                        return item.name.search(newValue) !== -1
                    })
                }
            }
        },
        mounted() {
            setTimeout(this.queryAllData, 1000)
        },
        template: `
            <div id="application">
            <div class="container">
                <div class="content">
                    <input type="radio" :value="-1" v-model="this.sexFilter" id="sexFilter-1" name="sexFilter" checked><label
                    for="sexFilter-1">全部</label>
                    <input type="radio" :value="1" v-model="this.sexFilter" id="sexFilter1" name="sexFilter"><label
                    for="sexFilter1">男</label>
                    <input type="radio" :value="0" v-model="this.sexFilter" id="sexFilter0" name="sexFilter"><label
                    for="sexFilter0">女</label>
                </div>
                <div class="content">
                    <label>搜索: </label>
                    <input type="text" id="searchKey" v-model.lazy.trim="this.searchKey">
                </div>
                <div class="content">
                    <table border="1" width="300px">
                        <tr>
                            <th>姓名</th>
                            <th>性别</th>
                        </tr>
                        <tr v-for="(user, index) in this.showData">
                            <td>{{ user.name }}</td>
                            <td v-if="user.sex === 1">男</td>
                            <td v-else-if="user.sex === 0">女</td>
                        </tr>
                    </table>
                </div>
            </div>
            </div>`
    }
    app.component("comp", comp)
    app.mount("#application")
</script>
</body>
</html>